<template>
  <div>
    <Bar />
    <Foo />
    <button @click="setName('BraveY')">修改name</button>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import Bar from "./13-bar.vue";
import Foo from "./14-foo.vue";
import { provide } from "@vue/runtime-core";
export default {
  components: {
    Bar,
    Foo,
  },
  setup() {
    const name = ref("胖鸡");
    provide("name", name);
    function setName(newName) {
      name.value = newName;
    }
    provide("setName", setName);
    return {
      setName,
    };
  },
};
</script>

<style>
</style>